<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>权限设置</title>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
    <script src="/static/component/pear/module/ruinuo/sortable.js"></script>
    <link rel="stylesheet" href="/static/component/pear/css//module/engine_table.css"/>
</head>
<body class="pear-container">
<div class="view_body">
    <div class="design-box layui-elem-quote tips_legend display_flex" style="background: #fff">
       <div class="flex_1"> 提示：权限条件按照或连接，只要满足其中一个条件则通过授权</div>
        <button class="pear-btn pear-btn-sm btn_theme_1" onclick="getIds()">保存设置</button>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs4 left_con">
            <div class="table_body">
                <div class="table_head">
                    <div class="head_menu display_flex">
                        <li class="on" onclick="Left(0,'role')">按角色</li>
                        <li onclick="Left(1,'department')">按组织</li>
                        <li onclick="Left(2,'user')">按用户</li>
                    </div>
                </div>
                <div class="table_view layui-form" style="margin-top: 0px">
                    <table id="datatable_1" lay-filter="datatable_1"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-xs8 right_con">
            <div class="table_body">
                <div class="table_head">
                    <div class="head_menu display_flex">
                        <li class="on" onclick="Right(0,'menu')">针对菜单</li>
                        <li onclick="Right(1,'button')">针对按钮</li>
                    </div>
                </div>
                <div class="table_view layui-form" style="margin-top: 0px">
                    <table id="datatable_2" lay-filter="datatable_2"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    let $ = layui.jquery;
    let jQuery = $;
    let SettingData = {};
    let SeleteData = {};
    let menu_code = '';
    let raw = '';
    let InitData = {};
    let Mark = 'role';
    let MarkId = 0;
    let cat = "menu"
    layui.use(['engine_table', 'http', 'public'], function () {
        Left(0, 'role');
    })

    function Left(index, num) {
        Mark = num;
        MarkId = 0;
        let tableid = 'datatable_1';
        $(".left_con .head_menu li").removeClass('on');
        $(".left_con .head_menu li").eq(index).addClass('on');
        let style = 1;
        let cols = [
            {type: 'radio'},
            {field: 'name', title: '名称'},
            {field: 'num', title: '编码'},
            {field: 'id', title: '主键'},
        ];
        if (num == 'department') {
            style = 3;
        }
        let table = {
            style: style,
            elem: tableid,
            limit: 0,
            page: false,
            parent_id: "parent_id",
            parent_name: "name",
            height: "full-160",
            url: '/common/power/mark/?type=' + num,
            cols: layui.engine_table.ColsAll(cols, tableid),
        }
        table['source'] = {};
        SettingData[tableid] = table;
        layui.engine_table.TableStyle(table);
        layui.table.on('radio(datatable_1)', function (res) {
            MarkId = res.data.id || 0;
            Right();
        })
        layui.table.on('row(datatable_1)', function(res){
            MarkId = res.data.id || 0;
            res.setRowChecked({
                type: 'radio' // radio 单选模式；checkbox 复选模式
            });
            Right();
        })
        Right();
    }

    function Right(index = '', num = '') {

        if (num == '') {
            $('.right_con .head_menu li').each(function (i, element) {
                let on = $(element).attr("class");
                if (on == 'on') {
                    index = i;
                    num = 'menu';
                    if (i == 1) {
                        num = 'button'
                    }
                }
            })
        }
        cat = num;
        let tableid = 'datatable_2';
        $(".right_con .head_menu li").removeClass('on');
        $(".right_con .head_menu li").eq(index).addClass('on');
        let cols = [
            {type: 'checkbox'},
            {field: 'name', title: '名称'},
            {field: 'num', title: '编码'},
            {field: 'id', title: '主键'},
        ];
        let table = {
            style: 3,
            elem: tableid,
            limit: 0,
            page: false,
            parent_id: "parent_id",
            parent_name: "name",
            height: "full-160",
            url: '/common/power/cat/?mark=' + Mark + '&mark_id=' + MarkId + '&type=' + num,
            cols: layui.engine_table.ColsAll(cols, tableid),
        }
        table['source'] = {};
        SettingData[tableid] = table;
        layui.engine_table.TableStyle(table);

    }

    function getIds() {
        if (MarkId == 0) {
            layui.layer.alert("请先选择左侧数据",{icon:2});
            return false;
        }
        let res = layui.treeTable.checkStatus('datatable_2');

        let arr = res.data;
        let idsArray = [];
        arr.forEach(item => {
            let id = '' + item.id + '';
            if (id.includes('app_') == false && id.includes('mode_') == false) {
                idsArray.push(item.id);
            }
        });

        $('.right_con .layui-table-main table tr').each(function (i, element) {
            let length=$(element).find(".layui-icon-indeterminate").length;
            if (length==1)
            {
                let pid=$(element).find('*[data-field="id"]').find('.layui-table-cell').text();
                if (pid.includes('app_') == false && pid.includes('mode_') == false) {
                    idsArray.push(pid);
                }
            }
        })



        let ids = idsArray.toString();
        let PostData = {
            mark: Mark,
            mark_id: MarkId,
            cat: cat,
            cat_ids: ids,
        }
        layui.http.SendAjax('/common/power/edit/', PostData, [], function (res) {
            if (res.code == 200) {
                layer.msg('设置成功', {icon: 1, time: 1000});
                return;
            }
            layer.alert(res.msg, {icon: 2, title: '温馨提示'});
        })
    }


</script>
</body>
</html>
